<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.css">
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/skins/skyblue/dhtmlx.css">
    <script src="../../../js/jquery-3.4.1.js"></script>
    <style>

        .room-center {
            display: flex;
            justify-content: center;
        }

        .my-center {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 300px;
            align-items: center;
            border: 1px solid black;
            border-radius: 3px;
            margin: 5px;
        }

        .my-center > * {
            margin: 5px;
        }

        .my-center textarea {
            width: 200px;
            height: 100px;
        }

        .my-center button {
            width: 100px;
        }

    </style>
</head>
<body style="text-align: center;">
<div id="gridbox" style="width:1300px;height:400px; margin: 100px auto;"></div>
<div class="room-center">
    <div class="my-center">
        <textarea readonly="readonly" id="cell2"></textarea>
        <button onclick="getCheckedRows()">获取选中行第1列的值</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="cell3"></textarea>
        <button onclick="getAllRowsCell0Val()">获取表格第一列的所有选中值</button>
    </div>
    <div class="my-center">
        <textarea readonly="readonly" id="cell4"></textarea>
        <button onclick="runCell()">获取json进行业务操做</button>
    </div>
</div>

<script>

    var mygrid;

    $(function () {
        gridInit();
        initData();
        disableInit();
    })

    function runCell() {
        let rowId = mygrid.getSelectedRowId();
        console.log(rowId);
        let obj = JSON.parse(mygrid.cells(rowId, 1).getValue());
        console.log(obj);
    }

    function gridInit() {
        mygrid = new dhtmlXGridObject('gridbox');
        //the path to images required by grid
        mygrid.setImagePath("../../../resource/dhtmlxsuitev508proeval/codebase/imgs/");
        mygrid.setHeader("<input style='width: 40px;' type='checkbox' id='checkall' onclick='selectAll(this.checked)'/>,Sales,Book title,Author,Price");//the headers of columns
        mygrid.setInitWidths("50,0,100,250,150,*");          //the widths of columns
        mygrid.setColAlign("center,center,center,center,center,center");       //the alignment of columns
        mygrid.setColTypes("ch,ro,ro,ed,ed,ed");                //the types of columns
        mygrid.attachEvent("onRowSelect", onRowSelect);
        // 不加这个将会导致双击就会进入列编辑状态
        mygrid.attachEvent("onEditCell", function (stage, rId, cInd, nValue, oValue) {
            if ("0" != cInd) {
                return false;
            }
            return true;
        });
        mygrid.init();      //finishes initialization and renders the grid on the page
    }

    function initData() {
        let data = [{
            id: 1,
            name: "s1",
            age: "11",
            state: 1,
            address: "sss1"
        }, {
            id: 2,
            name: "s2",
            age: "12",
            state: 2,
            address: "sss2"
        }];
        data.forEach(x => {
            mygrid.addRow(x.id, [
                true,
                JSON.stringify(x),
                x.id,
                x.name,
                x.age,
                x.state
            ])
        })
    }

    function disableInit() {
        debugger;
        let rowCount = mygrid.getRowsNum();
        for (let i = 0; i < rowCount; i++) {
            let stateVal = mygrid.cells(mygrid.getRowId(i), 4).getValue();
            if (stateVal === "1") {
                console.log("setDisabled", mygrid.getRowId(i));
                mygrid.cells(mygrid.getRowId(i), 0).setDisabled(true);
            }
        }
    }

    function selectAll(flag) {
        let a = mygrid.getRowsNum();
        for (let i = 0; i < a; i++) {
            let stateVal = mygrid.cells(mygrid.getRowId(i), 4).getValue();
            if (stateVal === "1") {
                continue;
            }
            mygrid.cells(mygrid.getRowId(i), 0).setValue(flag);
        }
        // $("#checkall").attr("checked", flag);
    }

    function onRowSelect(id, ind) {
        let stateVal = mygrid.cells(id, 4).getValue();
        if (stateVal === "1") {
            return;
        }
        let checkedFlag = mygrid.cells(id, 0).getValue() === '1';
        mygrid.cells(id, 0).setValue(!checkedFlag);
    }

    function isEmpty(value) {
        if (typeof value === "undefined") {
            return true;
        }
        if (value === null) {
            return true;
        }
        if (typeof value === "string") {
            return value === "";
        }
        return false;
    }

    function getCheckedRows() {
        let a = mygrid.getRowsNum();
        let checkVal = [];

        for (let i = 0; i < a; i++) {
            let stateVal = mygrid.cells(mygrid.getRowId(i), 4).getValue();
            let isCheck = mygrid.cells(mygrid.getRowId(i), 0).getValue();
            if (stateVal !== "1" && isCheck === '1') {
                checkVal.push(mygrid.cells(mygrid.getRowId(i), 1).getValue());
            }
        }

        $('#cell2').val(checkVal.join());
    }

    function getAllRowsCell0Val() {
        // mygrid.getCheckedRows(0)是获取所有被选中的行的第一列的值
        $('#cell3').val(mygrid.getCheckedRows(0));
    }

</script>
</body>
</html>